@import "root.css";

.main-banner {
    position: absolute;
    width: 100%;

    top: 50%;
    transform: translateY(-50%);
}

.main-text {
    width: 100%;
    font-size: 65px;
    text-align: center;

    font-family: "Roboto";
    font-weight: Bold;

    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

.secondary-text {
    display: block;
    font-family: "Inter";
    font-weight: 400;
    font-size: 21px;
    color: var(--main-gray);

    margin-top: 20px;
}

.main-text-fix * {
    position: relative;
}

.buttons {
    height: 65px;
    width: 100%;

    display: flex;
    justify-content: center;

    margin-top: 20px;
}

.register-button {
    height: 100%;
    width: 185px;

    background-color: black;
    color: white;

    font-family: "Inter";
    font-size: 17px;

    border-radius: 10px;
    border: 0;

    margin-right: 5px;
}

.login-button {
    height: 100%;
    width: 185px;

    font-family: "Inter";
    font-size: 17px;

    border-radius: 10px;

    margin-left: 5px;
}


@media (max-width: 1440px) {
    .btc {
        width: 10%;
    }

    .btc-blured {
        top: 10%;
    }

    .main-window-preview {
        width: 95%;
    }
}

@media (max-width: 1340px) {
    .main-window-preview {
        width: 100%;
    }
}

@media (max-width: 1210px) {
    .main-text-fix {
        font-size: 60px;
    }
}

@media (max-width: 1175px) {
    .main-window-preview {
        width: 120%;
        left: 50%;
        transform: translateX(-50%);
    }

    body {
        background-image: url('/static/new pages static/images/mobile-background.png');
    }
}

@media (max-width: 1010px) {
    .main-window-preview {
        width: 140%;
    }
}

@media (max-width: 820px) {
    .main-window-preview {
        width: 90%;
        height: auto;
        top: 50%;
    }

    .buttons {
        flex-direction: column;
        align-items: center;

        position: relative; 

        height: 100%;
    }

    .secondary-text {
        position: relative;
    }

    .buttons button {
        height: 65px;
        margin: 0;
        width: 70%;
        margin-bottom: 5px;
    }

    .main-text-fix {
        font-size: 55px;
    }

    .btc-blured {
        top: 50%;
        z-index: 1;
    }
}

@media (max-width: 570px) {
    .main-window-preview {
        width: 140%;
    }

    .main-text-fix {
        font-size: 40px;
    }

    .secondary-text {
        margin-top: 5px;
        font-size: 18px;
    }

    .buttons button {
        height: 55px;
    }
}

@media (max-width: 520px) {
    .buttons button {
        width: 90%;
    }
}

@media (max-width: 390px) {
    .main-text-fix {
        font-size: 37px;
    }

    .secondary-text {
        font-size: 16px;
    }
}

@media (max-width: 362px) {
    .main-text-fix {
        font-size: 32px;
    }

    .secondary-text {
        font-size: 14px;
    }

    .buttons button {
        height: 45px;
    }
}